<template>
    <div class="common-layout">
        <el-container>
            <div class="fullpage-main">
                <el-header>
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                        @select="handleSelect" style="background-color: #85bbe5;">
                        <el-menu-item index="0">
                            <a href="http://localhost:5173/#/home">
                                <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.56GR4Ye5pn7h88g1ah5wNAAAAA?r=0&rs=1&pid=ImgDetMain" alt="问卷星,调查问卷模板"
                                    width="130" height="48">
                            </a>
                        </el-menu-item>
                        <el-menu-item index="1">
                            <div class="mb-4"><el-button round
                                    style="background-color: #409eff; color: #fff; font-size: larger; "
                                    @click="login">登录</el-button></div>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <div class="mb-4"><el-button round
                                    style="background-color: #409eff; color: #fff; font-size: larger; "
                                    @click="home">返回首页</el-button></div>
                        </el-menu-item>
                    </el-menu>
                </el-header>
                <el-main>
                    <el-main>
                        <el-dialog v-model="centerDialogVisible" width="500" align-center>
                            <el-container class="flex-container"
                                style="background-color: #fff; display: flex; justify-content: center; align-items: center;">
                                <el-tabs v-model="activeName" class="demo-tabs">
                                    <el-tab-pane label="个人免费账号" name="first">
                                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                                            <el-form-item label="">
                                                <el-input placeholder="请输入手机号" v-model="phone"
                                                    @input="checkPhoneFormat" />
                                            </el-form-item>
                                            <div v-if="isShowCodeInput">
                                                <el-form-item label="">
                                                    <el-input v-model="form.code" placeholder="请输入验证码">
                                                        <template #suffix>
                                                            <el-button type="text" @click="gotocode"
                                                                :disabled="countdown > 0" class="custom-suffix-btn">
                                                                {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
                                                            </el-button>
                                                        </template>
                                                    </el-input>
                                                </el-form-item>
                                            </div>
                                            <el-form-item label="">
                                                <el-input placeholder="设置密码(8-20位字母.数字或特殊符号)" v-model="password" />
                                            </el-form-item>
                                            <el-form-item label="">
                                                <div class="agreement-container">
                                                    <input type="checkbox" id="agreement-checkbox">
                                                    <label for="agreement-checkbox"></label>我已阅读并同意问卷星用户服务协议"和《隐私条款》
                                                </div>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click=create_user
                                                    style="width: 300px; background-color: #f79000;">创建用户</el-button>
                                            </el-form-item>

                                        </el-form>

                                        <div class="agreement-container" style="">
                                            <label for="">已有账号?</label>
                                            <button @click="login">立即登录</button>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="企业试用账号" name="second">
                                        <strong>空</strong>
                                    </el-tab-pane>
                                </el-tabs>
                            </el-container>
                        </el-dialog>
                    </el-main>
                </el-main>
            </div>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import request from '@/request'
import { ElMessage } from 'element-plus'
const countdown = ref<number>(0);
const router = useRouter()
const activeIndex = ref('1')
const centerDialogVisible = ref(false)
const activeName = ref('first')
const phone = ref('')
const password = ref('')
const code = ref('')
const isShowCodeInput = ref(false)
const phoneError = ref(false)
//正则
const phoneReg = /^1[3-9]\d{9}$/
const checkPhoneFormat = () => {
    const isValid = phoneReg.test(phone.value)
    isShowCodeInput.value = isValid
    phoneError.value = !isValid
}
const url = ref('')
const form = reactive({
    phone: '',
    password: '',
    agreement: false,
    code: ''
})
onMounted(() => {
    centerDialogVisible.value = true
})
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
function gotocode() {
    request({
        url: '/code/',
        method: 'post',
        data: {
            phone: phone.value
        }
    }).then(response => {
        if (response.status == 200) {
            ElMessage.success('短信发送成功')
        }
    })
}
function create_user() {
    request({
        url: '/register/',
        method: 'post',
        data: {
            phone: phone.value,
            password: password.value,
            code: form.code
        }
    }).then(response => {
        if (response.status == 200) {
            ElMessage.success('注册成功')
            router.push({ path: '/login' })
        } else {
            ElMessage.error(response.data.message || '未知的错误')
        }
    }).catch(error => {
        const errMsg = error.response.data.message || '请求失败'
        ElMessage.error(errMsg)
        console.log('注册失败', error.response)
    })
}

function home() {
    router.push({ path: '/home' })
}
function login() {
    router.push({ path: '/login' })
}
</script>
<style scoped>
.fullpage-main {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    /* background-image: url(//image.wjx.com/images/newimg/register-login/bacg.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
    /* filter: (src='//image.wjx.com/images/newimg/register-login/bacg.jpg', sizingMethod='scale'); */
    background-position: center center;
}

.el-menu--horizontal>.el-menu-item:nth-child(1) {
    margin-right: auto;
}

.fullpage-wrapper .member .btn {
    font-size: 18px;
    line-height: 2;
    margin-left: 20px;
    border:
        1px solid #fff;
    border-radius: 100px;
    background-color: transparent;
}

.flex-container {
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>